<template>
    <div class="product-reviews">
        <!-- 评论筛选标签 -->
        <div class="reviews-filter">
            <div class="filter-tabs">
                <div class="filter-tab active" @click="activeFilter = 'all'">
                    全部
                </div>
                <div class="filter-tab" @click="activeFilter = 'withImage'">
                    有图 ({{ reviewsData.imgsCount }})
                </div>
                <div class="filter-tab" @click="activeFilter = 'positive'">
                    好评
                </div>
                <div class="filter-tab" @click="activeFilter = 'negative'">
                    差评
                </div>
            </div>
        </div>

        <!-- 评论列表 -->
        <div class="reviews-list">
            <div v-for="item in filteredReviews" :key="item.review.id" class="review-item">
                <!-- 用户信息 -->
                <div class="review-header">
                    <div class="user-avatar">
                        <img :src="item.review.userInfo.avatarUrl" :alt="item.review.userInfo.nickname" />
                    </div>
                    <div class="user-info">
                        <div class="username">{{ item.review.userInfo.nickname }}</div>
                        <div class="review-meta">
                            <span class="review-date">{{ formatDate(item.review.pubTime) }}</span>
                            <span class="purchase-info">已购: {{ item.goods.saleAttrVal }}</span>
                        </div>
                        <div class="review-score">
                            <el-rate v-model="item.review.score" disabled />
                        </div>
                    </div>
                </div>

                <!-- 评论内容 -->
                <div class="review-content">
                    <div class="review-text">{{ item.review.text }}</div>

                    <!-- 评论图片 -->
                    <div v-if="item.review.images && item.review.images.length > 0" class="review-images">
                        <div v-for="(image, index) in item.review.images" :key="index" class="review-image">
                            <img :src="image" :alt="`评论图片${index + 1}`" @click="previewImage(image)" />
                        </div>
                    </div>
                </div>

                <!-- 评论操作 -->
                <div class="review-actions">
                    <div class="action-item" @click="handleLike(item.review.id)">
                        <el-icon>
                            <Star />
                        </el-icon>
                        <span>有用</span>
                    </div>
                    <div class="action-item" @click="handleReply(item.review.id)">
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                        <span>回复</span>
                    </div>
                </div>

                <!-- 回复区域 -->
                <div v-if="item.reply && item.reply.length > 0" class="reply-section">
                    <div v-for="reply in item.reply" :key="reply.id" class="reply-item">
                        <div class="reply-user">{{ reply.userInfo.nickname }}</div>
                        <div class="reply-content">{{ reply.text }}</div>
                        <div class="reply-date">{{ formatDate(reply.pubTime) }}</div>
                    </div>
                </div>

                <!-- 回复输入框 -->
                <div v-if="replyingTo === item.review.id" class="reply-input-section">
                    <el-input v-model="replyText" type="textarea" :rows="3" placeholder="写下你的回复..." maxlength="200"
                        show-word-limit />
                    <div class="reply-actions">
                        <el-button size="small" @click="cancelReply">取消</el-button>
                        <el-button type="primary" size="small" @click="submitReply(item.review.id)">发送</el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载更多 -->
        <div v-if="hasMore" class="load-more">
            <el-button @click="loadMore" :loading="loading">加载更多评论</el-button>
        </div>

        <!-- 图片预览 -->
        <el-dialog v-model="imagePreviewVisible" title="图片预览" width="60%">
            <div class="image-preview">
                <img :src="previewImageUrl" alt="预览图片" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'


// Props
interface Props {
    goodsId: string
}

const props = defineProps<Props>()

// 响应式数据
const activeFilter = ref('all')
const loading = ref(false)
const hasMore = ref(true)
const replyingTo = ref('')
const replyText = ref('')
const imagePreviewVisible = ref(false)
const previewImageUrl = ref('')

// 模拟评论数据
const reviewsData = ref({
    list: [
        {
            review: {
                id: "1708853741366624256",
                userInfo: {
                    uid: 171680165,
                    nickname: "j*****************g",
                    avatarUrl: "https://bbs-static.miyoushe.com/static/2024/06/12/3ff8f7035fa1d5166b3e15d5c6d2c5b1_2315574946320395362.png"
                },
                pubTime: 1696257456,
                text: "很大很厚，很值",
                score: 5,
                images: [
                    "https://act-upload.mihoyo.com/mall/2023/10/02/171680165/ead26e680acc2bc44646e8364440d145_811304955197449444.jpg"
                ],
                userType: 1,
                parentId: 0,
                auditStatus: 2
            },
            goods: {
                goodsId: "2028608294324840472576",
                name: "「崩坏：星穹铁道」光锥系列亚克力流沙立牌",
                coverUrl: "https://act-webstatic.mihoyo.com/upload/mall/2025/07/21/149433e311027bd440c5308731e5f8a2_4642751770306204096.jpeg",
                saleAttrVal: "拂晓之前"
            },
            reply: [],
            shopInfo: {
                shopCode: "xqtd",
                shopName: "货全杂货铺"
            },
            skuOrderNo: "725123579292690432"
        },
        {
            review: {
                id: "1708853741366624257",
                userInfo: {
                    uid: 171680166,
                    nickname: "堆**c",
                    avatarUrl: "https://bbs-static.miyoushe.com/static/2024/06/12/4ff8f7035fa1d5166b3e15d5c6d2c5b2_2315574946320395363.png"
                },
                pubTime: 1696157456,
                text: "质量不错，包装也很好，值得购买",
                score: 4,
                images: [],
                userType: 1,
                parentId: 0,
                auditStatus: 2
            },
            goods: {
                goodsId: "2028608294324840472576",
                name: "「崩坏：星穹铁道」光锥系列亚克力流沙立牌",
                coverUrl: "https://act-webstatic.mihoyo.com/upload/mall/2025/07/21/149433e311027bd440c5308731e5f8a2_4642751770306204096.jpeg",
                saleAttrVal: "银河铁道之夜"
            },
            reply: [
                {
                    id: "reply1",
                    userInfo: {
                        uid: 171680167,
                        nickname: "官方客服"
                    },
                    text: "感谢您的支持，我们会继续努力提供更好的产品和服务！",
                    pubTime: 1696167456
                }
            ],
            shopInfo: {
                shopCode: "xqtd",
                shopName: "货全杂货铺"
            },
            skuOrderNo: "725123579292690433"
        }
    ],
    count: 6071,
    imgsCount: 1305,
    shopInfo: {
        shopCode: "xqtd",
        shopName: "货全杂货铺"
    },
    foldedNount: 7840
})

// 计算属性：过滤评论
const filteredReviews = computed(() => {
    let reviews = reviewsData.value.list

    switch (activeFilter.value) {
        case 'withImage':
            reviews = reviews.filter(item => item.review.images && item.review.images.length > 0)
            break
        case 'positive':
            reviews = reviews.filter(item => item.review.score >= 4)
            break
        case 'negative':
            reviews = reviews.filter(item => item.review.score <= 2)
            break
        default:
            break
    }

    return reviews
})

// 方法
const formatDate = (timestamp: number) => {
    const date = new Date(timestamp * 1000)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}年${month}月${day}日`
}

const handleLike = (reviewId: string) => {
    ElMessage.success('感谢您的反馈！')
}

const handleReply = (reviewId: string) => {
    replyingTo.value = reviewId
    replyText.value = ''
}

const cancelReply = () => {
    replyingTo.value = ''
    replyText.value = ''
}

const submitReply = (reviewId: string) => {
    if (!replyText.value.trim()) {
        ElMessage.warning('请输入回复内容')
        return
    }

    // 这里可以调用API提交回复
    ElMessage.success('回复已发送')
    cancelReply()
}

const previewImage = (imageUrl: string) => {
    previewImageUrl.value = imageUrl
    imagePreviewVisible.value = true
}

const loadMore = () => {
    loading.value = true
    // 模拟加载更多数据
    setTimeout(() => {
        loading.value = false
        // 这里可以调用API加载更多评论
        ElMessage.info('暂无更多评论')
        hasMore.value = false
    }, 1000)
}

// 生命周期
onMounted(() => {
    console.log('评论组件已加载，商品ID:', props.goodsId)
    // 这里可以根据goodsId调用API获取评论数据
})
</script>

<style scoped>
.product-reviews {
    padding: 20px 0;
}

/* 评论筛选 */
.reviews-filter {
    margin-bottom: 24px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 16px;
}

.filter-tabs {
    display: flex;
    gap: 16px;
}

.filter-tab {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.filter-tab:hover {
    background: #e9ecef;
    color: #409eff;
}

.filter-tab.active {
    background: #ff6b9d;
    color: #fff;
}

/* 评论列表 */
.reviews-list {
    display: flex;
    flex-direction: column;
}

.review-item {
    padding: 20px;
    border: 1px solid #e9ecef;
    background: #fff;
    text-align: left;
}

/* 评论头部 */
.review-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex: 1;
}

.username {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-date {
    font-size: 12px;
    color: #999;
}

.purchase-info {
    font-size: 12px;
    color: #666;
}

.review-score {
    margin-top: 4px;
}

/* 评论内容 */
.review-content {
    padding-left: 60px;
    margin-bottom: 16px;
    text-align: left;
}

.review-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 6px;
    text-align: left;
}

.review-images {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.review-image {
    width: 120px;
    height: 120px;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.review-image:hover {
    transform: scale(1.05);
}

.review-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 评论操作 */
.review-actions {
    display: flex;
    gap: 16px;
    padding-left: 60px;
    margin-bottom: 16px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    transition: color 0.3s ease;
}

.action-item:hover {
    color: #409eff;
}

/* 回复区域 */
.reply-section {
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.reply-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.reply-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.reply-user {
    font-size: 12px;
    font-weight: 500;
    color: #409eff;
    margin-bottom: 4px;
}

.reply-content {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 4px;
}

.reply-date {
    font-size: 11px;
    color: #999;
}

/* 回复输入框 */
.reply-input-section {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
}

.reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* 加载更多 */
.load-more {
    text-align: center;
    margin-top: 32px;
}

/* 图片预览 */
.image-preview {
    text-align: center;
}

.image-preview img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .filter-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-tab {
        padding: 6px 12px;
        font-size: 12px;
    }

    .review-item {
        padding: 16px;
    }

    .review-image {
        width: 80px;
        height: 80px;
    }

    .review-actions {
        gap: 12px;
    }

    .action-item {
        font-size: 12px;
    }
}
</style>
